import React, { useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { Header, Footer } from '../../components';
import './index.less';
import { InputNumber, Checkbox, Button, Popconfirm } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import ceshi2 from '../../assets/proimg/ceshi2.jpg';
interface MatchParams { }
interface defaultShopData {
  id: string;
  isCheck: boolean;
  shopImg: string;
  shopName: string;
  PartNumber: string;
  Brand: string;
  OriginalPartNumber: string;
  UnitPrice: string;
  num: number;
  Subtotal: string;
  Inventory: string;
}
export const ShoppingCart: React.FC<RouteComponentProps<MatchParams>> = (
  props
) => {
  const defaultData: any[] = [];
  const [shopData, setshopData] = useState<defaultShopData[] | []>(defaultData); // 购物车列表数据
  const [checkAll, setcheckAll] = useState<boolean>(false); // 是否全选
  const [tatolNum, settatolNum] = useState<number>(0); // 已选件数
  const [allPrice, setallPrice] = useState<number>(0.0); // 合计价钱

  React.useEffect(() => {
    const aaa = [
      {
        id: '11111',
        isCheck: false,
        shopImg: ceshi2,
        shopName: '大灯大灯11111111111',
        PartNumber: '3923456kfdas',
        Brand: '海上飞',
        OriginalPartNumber: 'LGOE93757395858',
        UnitPrice: '￥10',
        num: 1,
        Subtotal: '￥40',
        Inventory: '10',
      },
      {
        id: '22222',
        isCheck: false,
        shopImg: ceshi2,
        shopName: '大灯大灯2222222222',
        PartNumber: '3923456kfdas',
        Brand: '海上飞',
        OriginalPartNumber: 'LGOE93757395858',
        UnitPrice: '￥20',
        num: 2,
        Subtotal: '￥40',
        Inventory: '20',
      },
      {
        id: '3333',
        isCheck: false,
        shopImg: ceshi2,
        shopName: '大灯大33333333333333',
        PartNumber: '3923456kfdas',
        Brand: '海上飞',
        OriginalPartNumber: 'LGOE93757395858',
        UnitPrice: '￥30.98',
        num: 3,
        Subtotal: '￥40',
        Inventory: '30',
      },
    ];
    setshopData(aaa)
  }, [])

  // 一键删除选中商品
  const deleteAllShop = () => {
    let p = 0, n = 0;
    setshopData(shopData.filter((el: defaultShopData) => {
      if (el.isCheck) {
        p = p + el.num;
        n = n + el.num * Number(el.UnitPrice.substr(1))
      }
      settatolNum(tatolNum - p)
      setallPrice(allPrice - n)
      return el.isCheck !== true
    }))
  }

  // 单独删除购物车商品
  const deleteShop = (id: string) => {
    setshopData(shopData.filter((el: defaultShopData) => {
      if (el.isCheck && id === el.id) {
        settatolNum(tatolNum - el.num)
        setallPrice(allPrice - el.num * Number(el.UnitPrice.substr(1)))
      }
      return id !== el.id
    }))
  };

  // 单独选择操作
  const Checkfn = (id: string) => {
    let newshopData = shopData.concat();
    let isChecklength = 0; // 判断单选时候是否都已经选中
    newshopData.forEach((el) => {
      if (id === el.id) {
        el.isCheck = !el.isCheck;
        if (el.isCheck) {
          settatolNum(tatolNum + el.num);
          setallPrice(allPrice + el.num * Number(el.UnitPrice.substr(1)));
        } else {
          settatolNum(tatolNum - el.num);
          setallPrice(allPrice - el.num * Number(el.UnitPrice.substr(1)));
        }
      }
      if (el.isCheck) {
        isChecklength++;
      }
    });
    if (isChecklength === newshopData.length) {
      setcheckAll(true);
    } else {
      setcheckAll(false);
    }
    setshopData(newshopData);
  };

  // 全选操作
  const allCheckfn = () => {
    let newshopData = shopData.concat();
    let alltatolNum = tatolNum;
    let totallPrice = allPrice;
    const add = (el: defaultShopData) => {
      alltatolNum = alltatolNum + el.num;
      totallPrice = totallPrice + el.num * Number(el.UnitPrice.substr(1));
    };
    const less = (el: defaultShopData) => {
      alltatolNum = alltatolNum - el.num;
      totallPrice = totallPrice - el.num * Number(el.UnitPrice.substr(1));
    };
    setcheckAll(!checkAll);
    newshopData.forEach((el) => {
      el.isCheck = !el.isCheck;
      if (el.isCheck) {
        add(el);
      } else {
        less(el);
      }
      if (!checkAll) {
        if (!el.isCheck) {
          el.isCheck = true;
          add(el);
        }
      } else {
        if (el.isCheck) {
          el.isCheck = false;
          less(el);
        }
      }
    });
    settatolNum(alltatolNum);
    setallPrice(totallPrice);
    setshopData(newshopData);
  };

  // 商品数量加减对总数的影响
  const inputNumberfn = (
    event: number,
    info: { offset: number; type: 'up' | 'down' },
    id: string
  ) => {
    let newshopData = shopData.concat();
    newshopData.forEach((el) => {
      if (id === el.id) {
        if (el.isCheck) {
          if (info.type === 'up') {
            settatolNum(tatolNum + (event - el.num));
            setallPrice(
              allPrice + Number(el.UnitPrice.substr(1)) * (event - el.num)
            );
          } else {
            settatolNum(tatolNum - (el.num - event));
            setallPrice(
              allPrice - Number(el.UnitPrice.substr(1)) * (el.num - event)
            );
          }
        }

        el.num = event;
      }
    });
    setshopData(newshopData);
  };

  return (
    <div>
      <Header></Header>
      <div className='ShoppingCart'>
        <div className='shaopbox'>
          <div className='title'>
            <h1>询价购物车</h1>
          </div>
          <div className='shaopwrap'>
            <ul className='shop_th shop_li'>
              <li>
                <Checkbox checked={checkAll} onChange={allCheckfn} />
              </li>
              <li></li>
              <li>商品名称</li>
              <li>零件号</li>
              <li>品牌</li>
              <li>原厂零件号</li>
              <li>单价</li>
              <li>数量</li>
              <li>小计</li>
              <li>库存</li>
              <li>操作</li>
            </ul>
            {shopData.length === 0 ? (
              <div className='kong'>
                购物车空空如也~<a href='/InquiryIssue'>去询价</a>
              </div>
            ) : null}
            {shopData.map((item: defaultShopData, i: number) => (
              <ul className='shop_li shop_td' key={i}>
                <li>
                  <Checkbox
                    checked={item.isCheck}
                    onChange={() => Checkfn(item.id)}
                  />
                </li>
                <li>
                  <h2>
                    <img src={item.shopImg} alt='' />
                  </h2>
                </li>
                <li>{item.shopName}</li>
                <li>{item.PartNumber}</li>
                <li>{item.Brand}</li>
                <li>{item.OriginalPartNumber}</li>
                <li className='colorred'>{item.UnitPrice}</li>
                <li>
                  <InputNumber
                    onStep={(event, info) =>
                      inputNumberfn(event, info, item.id)
                    }
                    min={1}
                    style={{ width: '90%' }}
                    value={item.num}
                  />
                </li>
                <li className='colorred'>{item.Subtotal}</li>
                <li>{item.Inventory}</li>
                <li className='colorred'>
                  <span onClick={() => deleteShop(item.id)}>删除</span>
                </li>
              </ul>
            ))}
          </div>

          <div className='shopbtm'>
            <div>
              <Checkbox checked={checkAll} onChange={allCheckfn}>
                全选
              </Checkbox>
              <Popconfirm title="确定要删除选中的商品吗？" icon={<QuestionCircleOutlined style={{ color: 'red' }} />} cancelText='取消' okText='确定' onConfirm={deleteAllShop}>
                <span className='colorred'>删除</span>
              </Popconfirm>
            </div>
            <div>
              <h1>
                已选<span>{tatolNum}</span>件<b></b> 合计：<i>{allPrice}</i>
              </h1>

              <Button type='primary' size='large'>
                结算
              </Button>
            </div>
          </div>
        </div>
      </div>
      <Footer></Footer>
    </div>
  );
};
